<template>
  <div class="hello">
    <Button @click="openModal">
      {{ str }}
    </Button>
    <MyModal :visible="visible" @cancel="onCancel"/>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Button } from 'ant-design-vue';
import MyModal from './Modal/index.vue'

const str = ref('打开弹窗')

const visible = ref(false)

const openModal = () => {
  visible.value = true
}

const onCancel = () => {
  visible.value = false
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
